<template>
  <div class="shop-view">
    <div class="left-view">
      <div class="left-top">
        <box-view name="单品销量排行榜（TOP10）">
          <top-view :list="setLeft1Data(shopData.left1Data)"></top-view>
        </box-view>
      </div>
      <div class="left-bottom">
        <box-view name="热销品前十商品库存" >
          <div class="icon-warning">
          <!-- hover -->
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover">
              <div class="popover-content">
                <p>说明</p>
                <p>1、库存充足：当前库存量高于未来三天的销量之和；</p>
                <p>2、库存不足：当前库存量高于未来三天的销量之和的40%且不到100%时，请及时补货，以免影响销售；</p>
                <p>3、请及时补货：当前库存量低于未来三天的销量之和的40%时，请及时补货，以免影响销售；</p>
              </div>
              <i class="el-icon-warning" slot="reference"></i>
            </el-popover>
          </div>
          <hot-inventory :list="setLeft2Data(shopData.left2Data)"></hot-inventory>
        </box-view>
      </div>
    </div>
    <div class="middle-view">
      <div class="middle-top">
        <middle-view :dataVal="shopData.topData"></middle-view>
      </div>
      <div class="middle-bottom">
        <box-view name="销售额统计">
          <echarts-view :option="setEcharts(shopData.dataAll)"></echarts-view>
        </box-view>
      </div>
    </div>
    <div class="right-view">
      <div class="right-top">
        <box-view name="单品销售额排行榜（TOP10）" >
          <top-view :list="setRight1Data(shopData.right1Data)"></top-view>
        </box-view>
      </div>
      <div class="right-bottom">
        <box-view name="销售额统计">
          <table-view :titleList="titleList" :list="shopData.dataAll"></table-view>
        </box-view>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import EchartsView from "../components/echarts/index.vue";
import TableView from "@/components/TableView/index.vue";
import * as echarts from "echarts";
import BoxView from "@/components/BoxView/index.vue";
import TopView from "../components/top/index.vue";
import HotInventory from "../components/HotInventory/index";
import MiddleView from "@/components/MiddleView/index.vue";
export default {
  name: "ShopView",
  mixins: [],
  components: {
    EchartsView,
    TableView,
    BoxView,
    TopView,
    HotInventory,
    MiddleView,
  },
  props: {
    shopData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      btnType: 0,
      // 销售额统计
      optionAll: {
        // tooltip: {
        //   trigger: "axis",
        //   formatter:
        //     "{a0}: {c0}元<br />{a1}: {c1}<br />{a2}: {c2}元<br />{a3}: {c3}",
        // },
        tooltip: {
          axisPointer: {
                  type: "shadow", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
                  snap: true, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
                },
                showContent: true, // 是否显示提示框浮层，默认显示
                alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
                triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
                confine: true, // 是否将 tooltip 框限制在图表的区域内
                backgroundColor: "rgba(0,0,0,0.5)", // 提示框浮层的背景颜色
                padding: 15, // 提示框浮层内边距，单位px
                // position: "left",
                textStyle: {
                  color: "#fff", // 文字的颜色
                },
        },
        legend: {
          // data:[],
          data: ["销售额", "销售量", "同期销售额", "同期销售量"],
          textStyle: {
            color: "#fff",
          },
          // right: "10%",
          formatter: function (value) {
            return value;
          },
        },
        xAxis: [
          {
            splitArea: { show: false },
            axisTick: {
              alignWithLabel: true,
            },
            data: [],
            lineStyle: {
              color: "#fff",
            },
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "销售额（元）",
            position: "left",
            nameTextStyle: {
              color: "#fff",
            },
            lineStyle: {
              color: "#fff",
            },
            axisLabel: {
              color: "#fff",
              formatter: function (value) {
                if (value < 0) {
                  value = -value;
                } else {
                  value = value;
                }
                return value + "元";
              },
            },
          },
          {
            type: "value",
            name: "销售量",
            position: "right",
            nameTextStyle: {
              color: "#fff",
            },
            axisLabel: {
              color: "#fff",
              formatter: function (value) {
                if (value < 0) {
                  value = -value;
                } else {
                  value = value;
                }
                return value + "";
              },
            },
          },
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            stack: "A",
            itemStyle: {
              color: "#59F7FF",
              // 阴影的大小
              shadowBlur: 2,
              // 阴影水平方向上的偏移
              shadowOffsetX: 2,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(96,186,255, 0.6)",
            },
            data: [],
            yAxisIndex: 0,
            emphasis: {
              //
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0,0,0,0.3)",
              },
            },
          },
          {
            name: "销售量",
            type: "bar",
            stack: "B",
            itemStyle: {
              color: "#FF9B79",
              // 阴影的大小
              shadowBlur: 2,
              // 阴影水平方向上的偏移
              shadowOffsetX: 2,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(255,169,139, 0.6)",
            },
            data: [],
            yAxisIndex: 1,
            emphasis: {
              //
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0,0,0,0.3)",
              },
            },
          },
          {
            name: "同期销售额",
            type: "bar",
            stack: "A",
            itemStyle: {
              color: "#50B4FF",
              // 阴影的大小
              shadowBlur: 2,
              // 阴影水平方向上的偏移
              shadowOffsetX: 2,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(160,247,248, 0.6)",
            },
            data: [],
            yAxisIndex: 0,
            emphasis: {
              //
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0,0,0,0.3)",
              },
            },
          },
          {
            name: "同期销售量",
            type: "bar",
            stack: "B",
            itemStyle: {
              color: "#FFDB6D",
              // 阴影的大小
              shadowBlur: 2,
              // 阴影水平方向上的偏移
              shadowOffsetX: 2,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(255,223,131, 0.6)",
            },
            data: [],
            yAxisIndex: 1,
            emphasis: {
              //
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0,0,0,0.3)",
              },
            },
          },
        ],
      },
      // 表头数据
      titleList: [
        {
          class: "table-title-long text-size",
          title: "时间",
          value: "day",
        },
        {
          class: "table-title-long text-size",
          title: "销售额（元）",
          value: "nowMoney",
        },
        {
          class: "table-title-long text-size",
          title: "同期销售额（元）",
          value: "lastMoney",
        },
        {
          class: "table-title-long text-size",
          title: "销售量",
          value: "nowNum",
        },
        {
          class: "table-title-long text-size",
          title: "同期销售量",
          value: "lastNum",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
  },
  methods: {
    // 单品销量排行榜 - 完成
    setLeft1Data(data){
      let dataList = [];
      for (let i = 0; i < data.length; i++) {
        dataList.push(
          {
            no: i + 1,
            title: data[i].commodity,
            line: data[i].numRate + "%",
            num: data[i].num,
          }
        )
      }
      return dataList;
    },
    // 单品销售额排行榜 - 完成
    setRight1Data(data){
      let dataList = [];
      for (let i = 0; i < data.length; i++) {
        dataList.push(
          {
            no: i + 1,
            title: data[i].commodity,
            line: data[i].moneyRate + "%",
            num: data[i].money+"元",
          }
        )
      }
      return dataList;
    },
    // 热销品前十商品库存 未完成
    setLeft2Data(data) {
      let dataList = [];
      for (let i = 0; i < data.length; i++) {
        dataList.push(
          {
            title: data[i].commodity,
            line: data[i].stockRate + "%",
            // num: data[i].stock,
            num: Number(data[i].stockRate) >= 100 ?'库存充足' : (Number(data[i].stockRate)  >= 40 ? '库存不足' : '急需补货')
          }
        )
      }
      return dataList;
    },
    // 销售额统计(图表)
    setEcharts(data){
      this.optionAll.xAxis[0].data = data.map(item => item.day);
      // 设置销售额
      this.optionAll.series[0].data = data.map(item => item.nowMoney);
      // 设置销售量
      this.optionAll.series[1].data = data.map(item => item.nowNum);
      // 设置同期销售额
      this.optionAll.series[2].data = data.map(item => -item.lastMoney);
      // 设置同期销售量
      this.optionAll.series[3].data = data.map(item => -item.lastNum);
      let that = this
      this.optionAll.tooltip.formatter = function (params) {
            var value = params.value;
            //首先要看看params是怎样的数据结构，里面有什么内容;
            if (value < 0) {
              value = -value;
            }
            if (params.seriesName.indexOf("同期") == -1) {
              let index = 2,
              num = 0;
              if (params.componentIndex == 1) {
                index = 3
              }
              num = (value - (-that.optionAll.series[index].data[params.dataIndex]) )/ (-that.optionAll.series[index].data[params.dataIndex])
              // num = num.toFixed(2) * 100
              num = Math.floor(num * 10000) / 100
              let data = num > 0 ? "增长" : "减少";
              return `${
                params.seriesName
              }为：${value}元<br />对比同期${data}${num > 0?num : -num}%`;
            } else {
              return params.seriesName == "同期销售额"
                ? params.seriesName + "：" + value + "元"
                : params.seriesName + "：" + value;
            }
          }
      return this.optionAll;
    },
  },
};
</script>
<style lang="scss" scoped>
.shop-view {
  height: 100%;
  width: 100%;
  //margin-top: 20px;
  display: flex;
  .left-view {
    width: calc(30% - 20px);
    height: 100%;
    margin-left: 10px;
    //background: #fff;
    .left-top {
      height: calc(50% - 10px);
      width: 100%;
      margin-bottom: 10px;
    }
    .left-bottom {
      height: calc(50% - 10px);
      width: 100%;
      margin-top: 10px;
      position: relative;
      .box-view{
        .box-view-item{
          .icon-warning{
            position: absolute;
            top: 2px;
            z-index: 2;
            right: 20px;
            font-size: 20px;
            
            i{
              color: rgb(248, 208, 19);
            }
          }
        }
      }
    }
  }
  .middle-view {
    width: 40%;
    height: 100%;
    margin-right: 10px;
    margin-left: 10px;
    .middle-top {
      height: calc(50% - 10px);
      width: 100%;
      margin-bottom: 10px;
    }
    .middle-bottom {
      margin-top: 10px;
      height: calc(50% - 10px);
      width: 100%;
    }
  }
  .right-view {
    width: calc(30% - 20px);
    height: 100%;
    .right-top {
      height: 50%;
      height: calc(50% - 10px);
      width: 100%;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .right-bottom {
      height: calc(50% - 10px);
      width: 100%;
      margin-top: 10px;
    }
  }

}
</style>
<style lang="scss">
.shop-view
  .right-view
  .right-bottom
  .table-view
  .table
  .table-title
  .text-size {
  color: #0e5cc6;
  background: linear-gradient(180deg, #fff, #0e5cc6);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}

</style>
